<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>机构管理分账明细</span>
      </div>
    </template>
    <div class="content">
      <el-input
        v-model="tableConfig.keywords"
        style="max-width: 323px"
        placeholder="请输入机构名称"
        clearable
        class="height40"
        @change="getsearchName"
      >
        <template #append>
          <el-button type="primary" @click="getsearchName">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%; margin-bottom: 20px; height: 500px"
      row-key="storeId"
      :expand-row-keys="expandRowKeys"
      stripe
      ref="tableRef"
      @expand-change="expandChange"
    >
      <el-table-column prop="storeId" label="storeId" width="180" />
      <el-table-column prop="name" label="机构名称" width="180">
        <template #default="scope"
          ><p
            class="name"
            @click="saveInstitutionalDetails(scope.row.storeId, 'storeId')"
          >
            {{ scope.row.name }}
          </p></template
        >
      </el-table-column>
      <el-table-column prop="selfBalance" label="自营钱包" width="180" />
      <el-table-column label="付款钱包" width="180">
        <template #default="scope">
          <div>
            {{ Number(scope.row.storeBalance || 0).toFixed(2) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="提现余额" width="180">
        <template #default="scope">
          <div>
            {{ Number(scope.row.balance || 0).toFixed(2) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="总支出" width="180">
        <template #default="scope">
          <div>
            {{ Number(scope.row.totalExpenditure || 0).toFixed(2) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="总收入">
        <template #default="scope">
          <div>
            {{ Number(scope.row.totalIncome || 0).toFixed(2) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column type="expand" width="50">
        <template #default="props">
          <el-table
            ref="tableRef"
            v-loading="loading"
            :data="props.row.majorList"
            row-key="groupId"
            border
          >
            <el-table-column label="账户名称" width="180">
              <template #default="scope"
                ><p
                  style="cursor: pointer; color: #409eff"
                  @click="
                    saveInstitutionalDetails(scope.row.groupId, 'groupId')
                  "
                >
                  {{ scope.row.name }}
                </p></template
              >
            </el-table-column>
            <!--渠道管理 自营 付款 -->
            <el-table-column label="渠道名称" width="180">
              <template #default="scope">
                <div>
                  {{ scope.row.realName + '-' + scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="realName" label="渠道名称" width="180" /> -->
            <el-table-column prop="selfBalance" label="自营钱包" width="180" />
            <el-table-column prop="storeBalance" label="付款钱包" width="180" />
            <el-table-column prop="balance" label="提现余额" width="180" />
            <el-table-column label="总支出" width="180">
              <template #default="scope">
                <div>
                  {{ Number(scope.row.totalExpenditure || 0).toFixed(2) }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="总收入">
              <template #default="scope">
                <div>
                  {{ Number(scope.row.totalIncome || 0).toFixed(2) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 10px 0 0 0">
            <pagintion
              :tableConfig="tableDataChildren"
              @sizeChange="sizeChange('table2', $event)"
              @currentChange="currentChange('table2', $event)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagintion
      :tableConfig="tableConfig"
      @sizeChange="sizeChange('table1', $event)"
      @currentChange="currentChange('table1', $event)"
    />
  </el-card>
</template>

<script setup>
import pagintion from '@/components/Pagintions/pagintion.vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  getTableDataMoneyLogApi,
  getTableDatachannelApi,
} from '@/api/finance/finance';
const router = useRouter();
const loading = ref(false);
const tableRef = ref(null);
const tableConfig = ref({
  page: 1,
  pageSize: 20,
  keywords: '',
  total: 0,
});
const tableDataChildren = ref({
  page: 1,
  pageSize: 10,
  storeId: '',
  total: 0,
});
const tableData = ref([]);
const expandRowKeys = ref([]); // 只展开一行
const expandChange = (row) => {
  if (row.storeId == 0) {
    return;
  }
  // 如果当前行已经展开，则收起它
  if (expandRowKeys.value.includes(row.storeId)) {
    expandRowKeys.value = [];
  } else {
    // 展开当前行，收起其他行
    expandRowKeys.value = [row.storeId];
  }
  tableDataChildren.value.storeId = row.storeId;
  getTableDataChildren();
};
const getsearchName = () => {
  tableConfig.value.page = 1;
  getTableData();
};
// 机构详情
const saveInstitutionalDetails = (id, type) => {
  const queryParams = {
    storeId: type === 'storeId' ? id : tableDataChildren.value.storeId,
    groupId: type === 'groupId' ? id : 0,
    type,
  };
  router.push({
    path: '/finance/institutionalDetails',
    query: queryParams,
  });
};

const sizeChange = (tableId, val) => {
  if (tableId == 'table1') {
    tableConfig.value.pageSize = val;
    getTableData();
  } else {
    tableDataChildren.value.pageSize = val;
    getTableDataChildren();
  }
};
const currentChange = (tableId, val) => {
  if (tableId == 'table1') {
    tableConfig.page = val;
    getTableData();
  } else {
    tableDataChildren.value.page = val;
    getTableDataChildren();
  }
};
const getTableDataChildren = async () => {
  loading.value = true;
  delete tableDataChildren.value.total;
  const { data } = await getTableDatachannelApi(tableDataChildren.value);
  console.log('data:', data);
  if (tableDataChildren.value.storeId) {
    tableData.value.map((item) => {
      if (
        tableDataChildren.value.storeId &&
        item.storeId == tableDataChildren.value.storeId
      ) {
        item.majorList = data.data;
        tableDataChildren.value.page = data.current_page;
        tableDataChildren.value.pageSize = data.per_page;
        tableDataChildren.value.total = data.total;
      }
    });
  }
  // tableDataChildren.value.total = data.total;
  loading.value = false;
};
const getTableData = async () => {
  loading.value = true;
  delete tableConfig.value.total;
  const { data } = await getTableDataMoneyLogApi(tableConfig.value);
  tableData.value = data.data;
  tableConfig.value.total = data.total;
  loading.value = false;
};

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
